/**
  <ModelDragRender
    :modalObj="modalObj"
    @setModalObj="e => modalObj = e"
    @close="emit('setIsShow', false)"
    @cancel="emit('setIsShow', false)"
    @confirm="emit('setIsShow', false)"
  >
    <div class="" style="background:skyblue;">顶部</div>
    <div style="width:1000px;">我是内容</div>
    <div class="" style="background:pink;height:100px">底部</div>  
  </ModelDragRender>

  const modalObj = ref({
    isShow: true, // *必要参数modal弹框是否显示
    style:'', // 弹框盒子的样式
    // zIndex: 1, // 层级
    animate: true, // 需要动画吗？
    mask: true, // 需要遮罩吗？
    draggable: false, // 需要可拖拽吗？
    width: '500px', // 弹框宽度
    top: '20%', // 弹框距离顶部的高度
    left: `calc(50% - ${500 / 2}px)`, // 视口宽度50% - 弹框宽度的一半
    // 顶部模块 // 是否显示顶部  // 标题// 是否显示顶部右侧叉号
    header: {
      isShow: true, 
      title: '导入数据', 
      isShowClose: true
    },
    footer: { // 底部模块
      isShow: true, // 是否显示底部
      align: 'right', // right:按钮靠右显示  left: 按钮靠左显示    center: 按钮居中显示
      isShowClose: true, closeText: '关闭', // 显示关闭按钮      // 文案 
      isShowCancel: true, cancelText: '取消',  // 显示取消按钮   // 文案
      isShowConfirm: true, confirmText: '确定', // 显示确定按钮  // 文案              
    },
  })
 */
  import { ref, watch } from 'vue'
  export default function (props, emit) {
    let zIndex = ref(100)
    // 接收事件
    watch(() => props.modalObj.isShow, newVal => {
      if(newVal) {
        zIndex.value = props.modalObj.zIndex + 100 || new Date().getTime().slice(-7, -3)
      }
    }, {immediate: true})
    function close(){
      emit('setModalObj', { ...props.modalObj, isShow: false })
    }
    function closeModal() {
      close() // 默认关闭modal弹框
      emit('close')
    }
    // 关闭
    function handleClose() {
      close() // 默认关闭modal弹框
      emit('close')
    }
    // 取消
    function handleCancel() {
      close() // 默认关闭modal弹框
      emit('cancel')
    }
    // 处理确认
    function handleConfirm() {
      emit('confirm')
    }
    return {
      emit, zIndex, closeModal, handleClose, handleCancel, handleConfirm
    }
  }




  
  

